<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<script>
			function getData(url) {
				const pro = new Promise((resolve, reject) => {
					// 1. 创建 xhr 对象
					let xhr = new XMLHttpRequest()

					// 2. 配置请求方式和地址
					xhr.open('GET', url)

					// 3. 开始发送请求
					xhr.send()

					// 4. 接收结果
					xhr.onreadystatechange = function () {
						if (xhr.readyState !== 4) return
						if (xhr.readyState === 4 && xhr.status === 200) {
							resolve(xhr.responseText)
						} else {
							reject('服务器端错误')
						}
					}
				})

				return pro
			}

			// 实例方法：就是被实例化成员访问的方法
			//   => .then()   捕获正确结果，它返回一个新的Promise实例
			//   => .catch()   捕获错误结果
			//   => .finally()   不管Promise对象最后状态是正确还是错误，都会执行的操作

			// 对象方法：Promise 这个对象自己调用的方法

			getData('http://127.0.0.1:3000/data')
				.then((data) => {
					console.log(data)
				})
				.catch((err) => {
					console.log(err)
				})
		</script>
	</body>
</html>
